<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>简单的视差滚动</title>
  <link rel="stylesheet" type="text/css" href="./index.css">

</head>
<body>
  <section>
    <img src="../assets/bg.jpg" id="bg">
    <img src="../assets/moon.png" id="moon">
    <img src="../assets/mountain.png" id="mountain">
    <img src="../assets/road.png" id="road">
    <h2 id="text">Moon Light</h2>
  </section>
  <script>
    let bg = document.getElementById("bg");
    let moon = document.getElementById("moon");
    let mountain = document.getElementById("mountain");
    let road = document.getElementById("road");
    let text = document.getElementById("text");

    window.addEventListener("scroll", function() {
      let value = window.scrollY;
      bg.style.top = value*0.5 + 'px';
      moon.style.left =  -value*0.5 + 'px';
      mountain.style.top = -value*0.15 + 'px';
      road.style.top = value*0.15 + 'px';
      text.style.top = value + 'px';
    });

  </script>
</body>
</html>